@r: 1rem/75;
@keyframes ball{ 
  0% {  
      transform: translate(0, -8rem);  
  }   
  40% {  
    transform: translate(0, .4rem);  
  }  
  65% {  
    transform: translate(0, -.4rem);  
  } 
  75% {  
    transform: translate(0, 0.2rem);  
  }  
  100% {  
      transform: translate(0, -.2rem);  
  } 
}
@keyframes scale{ 
  0% {  
      transform: scale(.2);  
  } 
  80% {  
    transform: scale(1.2);  
  }   
  100% {  
      transform: scale(1);  
  } 
}
.turnTable {
  width: 100%;
  height: 1325*@r;
  background: url(../images/choujiang_bk.png) no-repeat center/cover;
  background-size: 100% 100%;
  overflow: hidden;
  .lucky-wheel {
    padding-top: 16*@r;
    .lucky-title {
      height: 305*@r;
      .user{
        display: inline-block;
        font-size: .346667rem;
        text-align: center;
        padding: 0 24*@r;
        height: 48*@r;
        line-height: 48*@r;
        
        border-radius: 0 24*@r 24*@r 0;
        color: #fff;
        position: fixed;
        top: 16*@r;
        left: 0;
      }
      .broadcast{
        margin: 0 auto;
        padding-top: 280*@r;
        width: 600*@r;
          p{
            color: rgba(255,255,255,1);
            text-align: center;
          }
          span{
            font-weight: bold;
          }
      }
    }
    .wheel-main {
      position: relative;
      margin-top: 160*@r;
      width: 100%;
      height: 670*@r;
      .wheel-pointer-box {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 100;
        transform: translate(-50%, -60%);
        width: 206*@r;
        height: 206*@r;
        .wheel-pointer {
          width: 206*@r;
          height: 206*@r;
          background: url("../images/zhizhen.png") no-repeat center;
          background-size: 100%;
        }
      }
      .light1{
        background: transparent url("../images/light1.png") no-repeat center;
        background-size: 100%;
      }
      .light2{
        background: transparent url("../images/light2.png") no-repeat center;
        background-size: 100%;
      }
      .wheel-light{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto auto;
        width: 670*@r;
        height: 670*@r;
        z-index: 10;
        img.caidai{
          width: 308*@r;
          height: 90*@r;
          position: absolute;
          top: 23*@r;
          left: 184*@r;
          z-index: 55;
        }
      }
      .wheel-bg {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto auto;
        width: 670*@r;
        height: 670*@r;
        background: url("../images/turn_bg1.png") no-repeat center;
			
        background-size: 100%;
        color: #fff;
        transition: transform 3s ease;
        z-index: 5;
        .prize-list {
          width: 100%;
          height: 100%;
          position: relative;
          width: 670*@r;
          height: 670*@r;
          background: url("../images/turn_bg2.png") no-repeat center;
				 
					background-size: 100%;
        }
      }
    }
    .button{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      margin-top: 27*@r;
      .btn{
        width: 266*@r;
        height: 64*@r;
        line-height:  64*@r;
        background: #fff;
        border-radius: 64*@r;
        box-shadow: 6*@r 2*@r 12*@r 1*@r rgba(52,14,0,0.24);
        color: #C5954A;
        font-size: 30*@r;
        text-align: center;
        position: relative;
        z-index: 90;
      }
      .toRule{
        margin: 0 60*@r 0 79*@r;
      }
    }
  }

     // shareCover
     .shareCover{
      width: 100%;
      height: 100%;
      background: transparent;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 999;
    }
}
.prize-pic{
  width: 200*@r;
  height: 56*@r;
}

.prize-pic img {
  display: block;
  margin: 0 auto;
  width: 90*@r;
  height: 56*@r;
}
.prize-type {
  font-size: 26*@r;
  //color: #BD8F46;
	color: #000;
  line-height: 38*@r;
  text-align: center;
}
.no-prize{
  color: #999;
}

.prize-list .prize-item {
  width: 200*@r;
  height: 235*@r;
  position: absolute;
  top: 0;
  left: 0; 
  z-index: 2;
  transform-origin: center bottom
}
.prize-list .prize-item:first-child {
  top: 100*@r;
  left: 235*@r;
  transform: rotate(30deg);
}
.prize-list .prize-item:nth-child(2) {
  top: 100*@r;
  left: 235*@r;
  transform: rotate(90deg);
}
.prize-list .prize-item:nth-child(3) {
  top: 100*@r;
  left: 235*@r;
  transform: rotate(150deg);
}
.prize-list .prize-item:nth-child(4) {
  top: 100*@r;
  left: 235*@r;
  transform: rotate(210deg);
}
.prize-list .prize-item:nth-child(5) {
  top: 100*@r;
  left: 235*@r;
  transform: rotate(270deg);
}
.prize-list .prize-item:nth-child(6) {
  top: 100*@r;
  left: 235*@r;
  transform: rotate(330deg);
}

.toast-mask {
	
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 100;
  width: 100%;
  height: 100%;
  .toast {
    position: absolute;
    top: -140*@r;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto auto;
    z-index: 200;
  }
 
 
  .prizeList{
    width: 644*@r;
    height: 939*@r;
    background: url("../images/prize_list_bg.png") no-repeat center/cover;
    animation: ball 1.1s forwards;
    .toast-container{
      width: 644*@r;
      position: relative;
      margin: 0 auto;
      .close{
        position: absolute;
        width: 88*@r;
        height: 88*@r;
        background: url("../images/close.png") no-repeat center/cover;
        top: -148*@r;
        right: 0;
      }
      .toast-content{
        margin: 0 auto;
        margin-top: 213*@r;
        width: 555*@r;
        height: 670*@r;
        font-size: 28*@r;
        overflow-y: auto;
				.contnet{
					padding-left: 5px;
					text-align: left;
					line-height: 44*@r;
				}
        h3{
          font-size: 30*@r;
          margin-top: 38*@r;
          text-align: center;
					input{
						border: 1px solid #eee;
						border-radius: 5px;
						padding: 5px;
					}
					p{
						
						font-size: 28*@r;
						line-height: 40*@r;
						margin-top: 15*@r;
					}
        }
        ul{
          width: 555*@r;
          li{
            display: flex;
            justify-content: space-between;
            border-bottom: 2*@r solid #E49134;
            line-height: 86*@r;
            color: #FFF2E4;
          }
          li:nth-child(odd){
            color: #FFF2E4;
          }
          li:nth-child(even){
            color: #FFF;
          }
        }
				.button{
					width: 244*@r;
					height: 70*@r;
					line-height: 70*@r;
					font-size: 30*@r;
					color: #C69B58;
					text-align: center;
					border-radius: 80*@r;
					background: #fff;
					margin: 0 auto;
					margin-top: 40*@r;
					box-shadow: 10*@r 5*@r 10*@r -5*@r rgb(200,166,91);
				}
      }
    }
  }
  .prize{
    width: 644*@r;
    height: 743*@r;
    background: url("../images/积分抽奖-中奖PNG.png") no-repeat center/cover;
		
    animation: scale 0.8s forwards;
    .toast-container{
      width: 644*@r;
      position: relative;
      margin: 0 auto;
      .close{
        position: absolute;
        width: 88*@r;
        height: 88*@r;
        background: url("../images/close.png") no-repeat center/cover;
        top: -320*@r;
        right: 0;
      }
      .toast-content{
        margin: 0 auto;
        margin-top: 360*@r;
        width: 555*@r;
      
				color: rgb(200,166,91);
				text-align: center;
				font-size: 16px;
				.congratu{
					font-size: 48*@r;
					color: #a71902;
					font-weight: bold;
				}
        .title{
          font-size: 30*@r;
          text-align: center;
          line-height: 55*@r;
					color: #555555;
					font-weight: bold;
        }
        img{
          width: 375*@r;
          height: 166*@r;
          display: block;
          margin: 0 auto;
          margin-bottom: 40*@r;
        }
        p{
          font-size: 24*@r;
          line-height: 36*@r;
          text-align: center;
        }
        .button{
          width: 244*@r;
          height: 60*@r;
          line-height: 60*@r;
          font-size: 24*@r;
          color: #fff;
          text-align: center;
          background: #a40f01;
          margin: 0 auto;
          margin-top: 40*@r;
					border-radius: 4px;
        }
      }
    }
  }
	.wanzheng{
		background: url("../images/wanzheng.png") no-repeat center/cover;
	}
	.submit_success{
		background: url("../images/success.png") no-repeat center/cover;
		background-size: 100%;
	}
	.phone_number{
		background: url("../images/phone.png") no-repeat center/cover;
		
	}
	.wanzheng,.submit_success,.phone_number{
		width: 644*@r;
		height: 743*@r;
		
		animation: scale 0.8s forwards;
		.toast-container{
			width: 644*@r;
			position: relative;
			margin: 0 auto;
			.close{
				position: absolute;
				width: 88*@r;
				height: 88*@r;
				background: url("../images/close.png") no-repeat center/cover;
				top: -320*@r;
				right: 0;
			}
			.toast-content{
				margin: 0 auto;
				margin-top: 380*@r;
				width: 555*@r;
			
				color: rgb(200,166,91);
				text-align: center;
				font-size: 16px;
				.title{
					font-size: 30*@r;
					text-align: center;
					line-height: 45*@r;
				}
				img{
					width: 375*@r;
					height: 166*@r;
					display: block;
					margin: 0 auto;
					margin-bottom: 40*@r;
				}
				p{
					font-size: 24*@r;
					line-height: 36*@r;
					text-align: center;
				}
				.button{
					width: 344*@r;
					height: 80*@r;
					line-height: 80*@r;
					font-size: 36*@r;
					color: #C69B58;
					text-align: center;
					border-radius: 80*@r;
					background: #fff;
					margin: 0 auto;
					margin-top: 40*@r;
					box-shadow: 10*@r 5*@r 30*@r -5*@r #9B5100;
				}
			}
		}
	}
  .noPrize{
    width: 644*@r;
    height: 537*@r;
    background: url("../images/noprize_bg.png") no-repeat center/cover;
    animation: scale 0.8s forwards;
    .toast-container{
      width: 644*@r;
      position: relative;
      margin: 0 auto;
      .close{
        position: absolute;
        width: 88*@r;
        height: 88*@r;
        background: url("../images/close.png") no-repeat center/cover;
        top: -168*@r;
        right: 0;
      }
      .toast-content{
        margin: 0 auto;
        margin-top: 230*@r;
        width: 555*@r;
        color: #fff;
        .title{
          font-size: 36*@r;
          text-align: center;
          line-height: 50*@r;
        }
        p{
          font-size: 24*@r;
          line-height: 36*@r;
          text-align: center;
          margin-top: 60*@r;
        }
        .button{
          width: 244*@r;
          height: 70*@r;
          line-height: 70*@r;
          font-size: 30*@r;
          color: #C69B58;
          text-align: center;
          border-radius: 80*@r;
          background: #fff;
          margin: 0 auto;
          margin-top: 10*@r;
          box-shadow: 10*@r 5*@r 10*@r -5*@r rgb(200,166,91);
          // box-shadow: 4px 2px 24px 1px #9B5100;
        }
      }
    }
  }
}